<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="container"></div>
    <script>
        // 编写一个函数 `createTree`，从嵌套对象创建一个嵌套的`ul/li`列表。
        let data = {
            "Fish": {
                "trout": {},
                "salmon": {}
            },
            "Tree": {
                "Huge": {
                    "sequoia": {},
                    "oak": {}
                },
                "Flowering": {
                    "apple tree": {},
                    "magnolia": {}
                }
            }
        };
        let container = document.getElementById('container');
        console.log(container);
        // console.log(data.length);

        function createTree(container, data) {

            // var ul = document.createElement('ul');
            // container.appendChild(ul)
            for (var k in data) {
                // var li = document.createElement('li');
                // li.innerHTML = datas[i][k];
                // ul.appendChild(li);
                var ul1 = document.createElement('ul');
                container.appendChild(ul1);
                var li = document.createElement('li');
                ul1.appendChild(li)
                // console.log(k);
                li.innerHTML = k;
                // console.log(data[k]);
                // var lis=document.createElement('li');
                // ul.appendChild(lis);
                // lis.innerHTML=data[k];
                var ul2 = document.createElement('ul');
                ul1.appendChild(ul2);
                for (var v in data[k]) {
                    // console.log(v);
                    var lis = document.createElement('li');
                    ul2.appendChild(lis);
                    lis.innerHTML = v;
                    // console.log(data[k][v]);
                    for (var i in data[k][v]) {
                        var ul3=document.createElement('ul');
                        ul2.appendChild(ul3);
                        var list = document.createElement('li');
                        ul3.appendChild(list);
                        list.innerHTML = i;
                    }
                    // var list=document.createElement('li');
                    // lis.appendChild(list);
                    // list.innerHTML=data[k][v];
                }

            }
        }
        createTree(container, data); // 将树创建在 container 中
    </script>
</body>

</html>